<template>
    <div class="record">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="修改记录" name="1">
                <RiskTableP
                    ref="multipleTable"
                    :tableConfig="tableConfig"
                    :tableData="tableData"
                    :column="tableColumns"
                    :paging="paging"
                    :searchParams="searchParams"
                    v-loading="tableLoading"
                    @page-change="getTableData"
                    :defaultSort="searchParams.sort"
                >
                    <template #operation="{row,$rowIndex}">
                        <RiskIconButton
                            type="primary"
                            icon="el-icon-view"
                            topTitle="查看比对记录"
                            size="mini"
                            :disabled="row.modifyType === '1'"
                            @on-click="lookInfo(row, $rowIndex)"
                        >
                        </RiskIconButton>
                    </template>
                </RiskTableP>
            </el-collapse-item>
            <el-collapse-item title="详情" name="2">
                <div class="detail-div">
                    <!-- <h3>详情</h3> -->
                    <ComparionRecord
                        :checkedRows="checkedRows"
                        :title="$attrs.title"
                        :type="type + '-record'"
                        :keyName="type + 'Code'"
                    ></ComparionRecord>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Watch } from 'vue-property-decorator';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import { timeFormat, dateFormat } from '@/utils/tools';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import RiskTableP from '@/common/components/risk-table-plus.vue';
import UserDict from '../dict/user-check';
import RoleDict from '../dict/role-check';
import DictionConstUtil from '@/utils/diction-const-util';
import { PageVO, TableConfigVO } from '@/common/vo';
import ComparionRecord from './comparion-record.vue';
import APIUser from '../api/auth-manage';
import APIRole from '../api/role-manage';
@Component({
    name: 'UpdateRecord',
    components: {
        RiskIconButton,
        RiskTableP,
        ComparionRecord,
    },
})
export default class UpdateRecord extends mixins(RiskEmitter) {
    @Prop() code: any;
    @Prop() dialog: boolean;
    @Prop() type: string; // 'role'
    UserDict = new UserDict();
    RoleDict = new RoleDict();
    tableConfig: TableConfigVO = {
        rowKey: 'serialNo',
    };
    searchParams: any = {
        modifyStatusTypes: ['2'],
        sort: {
            field: 'checkDate',
            order: 'desc',
        },
    };
    tableColumns = [
        {
            field: 'modifyAffair',
            title: '事件',
            align: 'center',
            sortable: true,
            minWidth: '120px',
            filterType: 'funnel',
            filterField: 'modifyAffairs',
            filters: DictionConstUtil.PojoToList3(this.UserDict.modifyAffairsPojo),
            render: value => this.UserDict.modifyAffairsPojo[value],
        },
        { field: 'checkReason', title: '复核原因', sortable: true, minWidth: '120px', filterType: 'search', filters: [{ data: '' }] },
        { field: 'modifyUser', title: '更新人', sortable: true, minWidth: '120px', filterType: 'search', filters: [{ data: '' }] },
        {
            field: 'modifyDate',
            title: '更新时间',
            align: 'center',
            sortable: true,
            minWidth: '180px',
            render: (value, row) => (dateFormat(value) + ' ' + timeFormat(row.modifyTime)).trim(),
        },
        {
            field: 'modifyStatus',
            // 使用的是modifyStatus字段
            title: '复核状态',
            align: 'center',
            // sortable: true,
            minWidth: '120px',
            // filterType: 'funnel',
            // filterField: 'modifyStatusTypes',
            // filters: DictionConstUtil.PojoToList3(this.UserDict.modifyStatusPojo),
            render: value => this.UserDict.modifyStatusPojo[value],
        }, // 待复核、复核通过、复核拒绝
        { field: 'checkUser', title: '复核人', sortable: true, minWidth: '120px', filterType: 'search', filters: [{ data: '' }] },
        {
            field: 'checkDate',
            title: '复核时间',
            align: 'center',
            sortable: true,
            minWidth: '180px',
            render: (value, row) => (dateFormat(value) + ' ' + timeFormat(row.checkTime)).trim(),
        },
        { field: 'operation', fixed: 'right', title: '操作', align: 'center', width: '100px' },
    ];
    activeNames: any = ['1'];
    visible: boolean = true;
    tableData: any[] = [];
    tableLoading: boolean = false;
    timeFormat = timeFormat;
    dateFormat = dateFormat;
    checkedRows: any[] = []; // 双击项所需数据
    paging: PageVO = {
        total: 0,
        currentPage: 1,
        pageSize: 10,
    };

    mounted() {
        if (this.type == 'role') {
            this.tableColumns[0].filters = DictionConstUtil.PojoToList3(this.RoleDict.modifyAffairsPojo);
            this.tableColumns[0].render = value => this.RoleDict.modifyAffairsPojo[value];
        }
        this.visible = this.dialog;
        this.getTableData();
        // 这里
    }

    @Watch('visible')
    handleVisible() {
        if (!this.visible) {
            this.$emit('close-custom');
        }
    }
    /**
     *表格数据
     */
    getTableData($event?: any) {
        if ($event && $event.type == 'sort') {
            this.searchParams.sort = {
                field: $event['sortField'],
                order: $event['order'],
            };
        }
        let requestData = {};
        let requestName;
        if (this.type == 'role') {
            requestName = APIRole.roleUpdateRecordList;
            requestData = {
                roleCode: this.code,
                ...this.searchParams,
                paging: this.paging,
            };
        } else if (this.type == 'user') {
            requestName = APIUser.userManageUpdateRecordList;
            requestData = {
                userCode: this.code,
                ...this.searchParams,
                paging: this.paging,
            };
        }
        requestName(requestData).then((res: any) => {
            this.tableData = res?.list || [];
            this.paging.total = res?.total || 0;
        });
    }

    // 查看比对记录
    lookInfo(row, $rowIndex) {
        console.log(row, $rowIndex, '$event');
        this.checkedRows = [row];
        this.activeNames = ['1', '2'];
    }

    close() {
        this.visible = false;
    }
}
</script>
<style lang="scss" scoped>
.detail-div {
    height: calc(50vh - 180px);
    overflow: auto;
}
.dialog-footer {
    margin-right: 20px;
    text-align: right;
}
.record /deep/ .vxe-table {
    .vxe-table--body-wrapper.body--wrapper {
        height: 35vh !important;
    }
}
.record {
    color: #222;
    padding: 10px;
    height: calc(100vh - 50px);
}
</style>
